import React from 'react';
import {Card, Tooltip, Typography, Row, Col, Spin} from 'antd';
import {QuestionCircleOutlined} from '@ant-design/icons';
import {numberHandle} from '~/utils/number';
import useGetData from '../common/useGetData';

const {Title} = Typography;

const ValueCard = props => {
    const {
        defaultTitle = '',
        tooltip = '',
        dashBoard: {dashBoardId} = {},
        unitId,
        queryFunc,
    } = props;

    const {data, loading} = useGetData({...props, queryFunc, isMountQuery: true});

    const unit = dashBoardId ? data?.[dashBoardId]?.[unitId] : {};
    const name = unit?.unitName ?? '';
    const cardValues = unit?.cardValues ?? [];
    const [{value = 0} = {}] = cardValues;

    return (
        <Card style={{margin: '4px 0'}}>
            <Row style={{alignItems: 'center'}}>
                <Col style={{flex: '1'}}>
                    <Title level={5} style={{color: '#888', margin: '0'}}>
                        {name || defaultTitle}
                    </Title>
                </Col>
                <Col style={{flex: '0'}}>
                    <Tooltip title={tooltip}>
                        <QuestionCircleOutlined style={{color: '#888'}} />
                    </Tooltip>
                </Col>
            </Row>
            <Spin spinning={loading}>
                <Title style={{margin: '15px 0 0'}}>
                    {numberHandle(value, 2)}
                </Title>
            </Spin>
        </Card>
    );
};

export default ValueCard;
